<template>
    <div class="dialog">
        <el-dialog 
        :title="dialog.title" 
        :visible.sync="dialog.show" 
        :close-on-click-modal="false" 
        :close-on-press-escape="false"
        :modal-append-to-body ="false"
        >
            <div class="form">
                <el-form ref="form" :model="formData" :rules="form_rules" label-width="120px" style="margin: 10px; width: auto;">
                    <el-form-item prop="name" label="名字:">
                            <el-input type="name" v-model="formData.name"></el-input>
                    </el-form-item>
                    <el-form-item prop="info" label="描述:">
                            <el-input type="info" v-model="formData.info"></el-input>
                    </el-form-item>
                    <el-form-item class="text_right">
                        <el-button @click="onSubmit('form')">提交</el-button>
                        <el-button @click="dialog.show = false">取消</el-button>
                    </el-form-item>
                </el-form>
            </div>
        </el-dialog>
    </div>
</template>

<script>
export default {
    name: 'dialog',
    data(){
        return{
            form_rules: {
                name: [
                    { required: true, message: '名字不能为空', trigger: 'blur' }
                ],
            }
        };
    },
    props: {
        dialog: Object,
        formData: Object
    },
    methods: {
        onSubmit(form) {
            this.$refs[form].validate(valid => {
                if(valid) {
                    const url = this.dialog.option == 'add' ? 'addgoodtypes' : `edit/${this.formData.id}`;
                    this.$axios.post(`/api/goods/${url}`, this.formData)
                    .then(res => {
                        // 添加成功
                        this.$message({
                            message: '数据添加成功',
                            type: 'success'
                        });
                    });
                    // 隐藏dialog
                    this.dialog.show = false;
                    this.$emit('update');
                }
            });
        }
    }
};
</script>

<style scoped>

</style>

